<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:composition template="layout.xhtml">

        <ui:define name="body">
            <h:form id="mapaForm" enctype="multipart/form-data" style="width: 100%">

                <p:panel styleClass="withoutBorder" rendered="#{managerMapaColetaDados.connect}">
                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" />
                </p:panel>

                <h3 class="title">Mapa de Coleta de Dados</h3>
                <p:growl showDetail="false" autoUpdate="true"  /> 

                <p:panel  styleClass="container_24 clearfix withoutBorder">
                    <h4 class="title">Dados Gerais</h4>

                    <p:outputLabel value="Setor" styleClass="grid_3" for="setor" />
                    <div class="grid_8">
                        <p:selectOneMenu id="setor" panelStyle="width:150px;" converter="setorconverter"
                                         value="#{managerMapaColetaDados.setor}" 
                                         required="true" >
                            <f:selectItem itemLabel="" itemValue="" />
                            <f:selectItems value="#{managerUtilitario.setor}"/>

                            <p:ajax update=":mapaForm:map" listener="#{managerMapaColetaDados.mapearSetorQuadras()}" />
                        </p:selectOneMenu> 
                    </div>
                    <div class="clear"/>
                    <br/>
                    <p:gmap id="map" center="#{managerMapaColetaDados.centroMapa}" zoom="#{managerMapaColetaDados.zoomLevelMapa}" 
                            type="ROADMAP" rendered="#{managerMapaColetaDados.connect}"
                            style="width:97%;height:500px" model="#{managerMapaColetaDados.mapModel}" >

                        <p:ajax event="stateChange" listener="#{managerMapaColetaDados.onStateChange}"/>

                        <p:ajax event="overlaySelect" listener="#{managerMapaColetaDados.onMarkerSelect}" />

                        <p:gmapInfoWindow id="infoWindow" maxWidth="320">
                            <p:outputPanel style="text-align: left; display: block; padding-bottom: 20px;"
                                           rendered="#{managerMapaColetaDados.quadra.id eq null}">
                                Não há coleta de dados
                            </p:outputPanel>
                            <p:outputPanel style="text-align: left; display: block; padding-bottom: 20px;">
                                <h:outputText value="Quadra: #{managerMapaColetaDados.quadra.numero}"/>

                                <h:outputText  value="Setor: #{managerMapaColetaDados.quadra.setor.numero}"
                                               style="white-space: pre-wrap; margin-left: 5px;"/>
                                <div class="clear"/>
                                <h:outputText value="Situação: #{managerMapaColetaDados.situacaoColetaDados.statusColetaDados.nome}"
                                              rendered="#{managerMapaColetaDados.situacaoColetaDados.id ne null}"/>
                                <div class="clear"/>
                                <h:outputText value="Responsável: #{managerMapaColetaDados.situacaoColetaDados.usuarioAgente.nome}"
                                              rendered="#{managerMapaColetaDados.situacaoColetaDados.id ne null}"/>
                                <div class="clear"/>
                                <h:outputText value="Obs: #{managerMapaColetaDados.situacaoColetaDados.observacao}"
                                              rendered="#{managerMapaColetaDados.situacaoColetaDados.id ne null}"/>
                                <div class="clear"/>
                                <h:outputText value="#{managerMapaColetaDados.situacaoColetaDados.dataCriacao}"
                                              rendered="#{managerMapaColetaDados.situacaoColetaDados.id ne null}">
                                    <f:convertDateTime pattern="'Em:' dd/MM/yyyy 'às' HH:mm:ss"/>
                                </h:outputText>

                                <div style="float: right; margin-right: -10px; right: 0; position: absolute;" >
                                    <a href="#" alt="Nova Ação" title="Nova Ação"  class="fa fa-plus fa-lg acaorapida"  onclick="dlg.show();"/>
                                    <a href="visualizarColetaDados.xhtml?q=#{managerMapaColetaDados.quadra.id}" alt="Visualizar" title="Visualizar"  class="fa fa-search fa-lg acaorapida"/>
                                </div>

                            </p:outputPanel>
                        </p:gmapInfoWindow>
                    </p:gmap>

                    <p:outputLabel value="O Georreferenciamento foi desabilitado pois não foi possível estabelecer uma conexão com a Internet !"
                                   rendered="#{!managerLayout.desabilitarMapa() and !managerMapaColetaDados.connect}"/>

                    <p:outputLabel value="O Georreferenciamento foi desabilitado pelo administrador do sistema !"
                                   rendered="#{managerLayout.desabilitarMapa()}"/>

                </p:panel>

            </h:form>
            <p:dialog id="dialog" widgetVar="dlg" showEffect="fade" width="450" header="Atualizar Coleta" resizable="false"  modal="true">
                <h:form id="dlgForm" prependId="false" styleClass="container_24 clearfix withoutBorder">
                    <p:outputLabel value="Ação" styleClass="grid_6" for="situacao" />
                    <div class="grid_18">
                        <p:selectOneMenu id="situacao" panelStyle="width:150px;"
                                         style="width: 99% !important;"
                                         value="#{managerMapaColetaDados.situacaoColetaDadosAtualizar.statusColetaDados}" >
                            <f:selectItem itemLabel="" itemValue="" />
                            <f:selectItems value="#{managerUtilitario.statusColetaDados}"/>
                        </p:selectOneMenu> 
                    </div>
                    <div class="clear"/>
                    <p:outputLabel value="Responsável" styleClass="grid_6" for="usuario"/>
                    <p:autoComplete id="usuario" value="#{managerMapaColetaDados.usuarioAtualizar}" var="item"
                                    forceSelection="true" dropdown="true" styleClass="grid_16" style="width: 70%;"
                                    itemValue="#{item}" itemLabel="#{item.nome}" panelStyle="max-height:200px;"
                                    completeMethod="#{managerUtilitario.autocompleteUsuario}" 
                                    converter="usuarioconverter">
                    </p:autoComplete>
                    <div class="clear"/>
                    <p:outputLabel value="Observações" styleClass="grid_6" for="usuario"/>
                    <p:inputTextarea styleClass="grid_16" value="#{managerMapaColetaDados.situacaoColetaDadosAtualizar.observacao}" />
                    <div class="clear"/>
                    <div class="buttonAction">
                        <p:commandButton value="Salvar" icon="ui-icon-pencil" 
                                         actionListener="#{managerMapaColetaDados.atualizarColeta()}"
                                         update="@this, :mapaForm:map" oncomplete="dlg.hide();"/>
                    </div>
                </h:form>
            </p:dialog>
        </ui:define>
    </ui:composition>

</html>
